<template>
    <ul class="clear">
        <li class="fl" v-for="icon in iconNames" :key="icon">
            <c-icon :name="icon" size="30"></c-icon>
            <div>{{ icon }}</div>
        </li>
    </ul>
</template>

<script>

    const reqs = require.context('@src/components/icon/svg', false, /\.svg$/);
    const iconNames = reqs.keys().map(v => {
        return v.replace(/^\.\/([^\.]+)\.svg$/, '$1');
    });

    export default {
        data() {
            return {
                iconNames,
            };
        },
    };
</script>

<style scoped lang="less">
    ul {
        >li {
            margin-top: 20px;
            width: 80px;
            text-align: center;

            >div {
                margin-top: 5px;
                font-size: 12px;
                color: @color-font;
            }
        }
    }
</style>
